<script setup>
import { ref, getCurrentInstance, defineEmits } from 'vue';
import { RefreshRight } from '@element-plus/icons-vue';

// 推荐书单数据
const recommend = ref([]);

// 获取当前实例以访问 $axios
const { proxy } = getCurrentInstance();

// 触发父组件的事件
const emit = defineEmits(['navigateToRecomments']);

// 获取热门博客的函数
const getHotrecommend = async () => {
  try {
    const response = await proxy.$axios.get('/hot/recommend');
    recommend.value = response.data.data;
    console.log('热门书单:', recommend.value);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// 调用获取书单数据
getHotrecommend();

// 触发点击书单详情
const navigateToRecomments = (book) => {
  emit('navigateToRecomments', book);
};
</script>

<template>
  <div id="main">
    <h1 style="text-align:center">热门书单</h1>
    <div id="reflash">
      <el-icon @click="getHotrecommend"><RefreshRight /></el-icon>
    </div>
    <div class="item">
      <p v-for="(book, index) in recommend" :key="book.id" class="book-item">
        <el-link type="primary" href="#" @click="navigateToRecomments(book)">
          {{ index + 1 }}&nbsp;&nbsp;{{ book.title }}
        </el-link>
      </p>
    </div>
  </div>
</template>

<style scoped>
#main {
  width: 200px;
  border: 1px solid rgb(199, 191, 191);
  border-radius: 5px;
}
#reflash {
  float: right;
}
.item {
  text-align: center;
  margin: 0;
}
</style>
